<template>
  <div class="container">
    <van-popup class="popup" v-model:show="showLeft" close-on-click-overlay position="left"
      :style="{ width: '45%', height: '100%' }">
      <ul>
        <li class="list-items"><van-icon class="icon" name="orders-o" />接单大厅<van-icon class="arrow" name="arrow" /></li>
        <li class="list-items" @click="ClickToseta"><van-icon class="icon" name="records-o" />已接订单<van-icon class="arrow" name="arrow" /></li>
        <van-divider />
        <li class="list-items" @click="ClickToMind"><van-icon class="icon" name="user-circle-o" />个人中心<van-icon class="arrow" name="arrow" /></li>
      </ul>
    </van-popup>
    <div class="header">
      <van-icon name="wap-nav" class="dh" @click="togglePopup" color="#fff" size="30" style="position: absolute; left: 10px;"></van-icon>
      <h3 class="title" style="width: 100%; text-align: center;">接单大厅</h3>
    </div>
   
    <div class="list">
      <van-search v-model="searchValue"
      shape="round"
      placeholder="请输入搜索关键词"
      input-align="center"
      background="transparent"
      @search="onSearch"
    />
      <div v-for="(item, index) in filteredList" :key="index" class="list-item" @click="goToDetail(item)">
        <div class="item-info">
          <div class="info-row">
            <span class="label">时间：</span>
            <span>{{ item.endTime }}</span>
          </div>
          <div class="info-row">
            <span class="label">简介：</span>
            <span>{{ shortContent(item.content) }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const togglePopup = () => {
  showLeft.value = !showLeft.value
}
const showLeft = ref(false)
const active = ref(0);
const ClickToseta = () => {
  router.push('/set-accept')
}
const ClickToMind = () => {
  router.push('/set')
}

// 搜索相关
const searchValue = ref('')

// 根据搜索关键词过滤列表
const filteredList = computed(() => {
  if (!searchValue.value) {
    return exchangeList.value
  }
  return exchangeList.value.filter(item => {
    return item.content.includes(searchValue.value) || 
           item.endTime.includes(searchValue.value)
  })
})

// 搜索方法
const onSearch = () => {
  console.log('搜索关键词:', searchValue.value)
  // 搜索逻辑已通过 computed 属性 filteredList 实现
}

// 控制弹出框显示的变量
const exchangeList = ref([
  // 现有数据保持不变
  {
    id: 1,
    endTime: '2025年4月1日',
    content: '前端',
  },
  {
    id: 2,
    endTime: '2025年3月1日',
    content: '后端',
  },


  // 更多数据...
])

const shortContent = (content) => {
  return content.length > 20 ? content.substring(0, 20) + '...' : content;
};

const goToDetail = (item) => {
  router.push(`/detail?id=${item.id}`)
}

// onMounted(() => {
//   // 这里可以使用fetch或axios替代uni.request
//   fetch('your-api-url')
//     .then(response => response.json())
//     .then(data => {
//       exchangeList.value = data
//     })
//     .catch(error => console.error('Error fetching data:', error))
// })
</script>
<link rel="stylesheet" href="dh.css">
</link>
<style scoped>
@import '../assets/dh.css';

.container {
  background: linear-gradient(180deg, rgba(195, 207, 226, 1) 0%, rgba(245, 247, 250, 1) 100%);
  min-height: 100vh;
}

.header {
  background-color: #4050B5;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.title {
  flex-grow: 1;
  color: #fff;
  text-align: center;
  font-size: 18px;
  margin: 0;
  letter-spacing: 10px;
}

.list {
  margin: 10px 10px;
}

.list-item {
  background-color: #fff;
  margin: 20px 0;
  padding: 20px;
  border-radius: 20px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.item-info {
  font-size: 14px;
}

.info-row {
  margin: 10px 0;
  display: flex;
  justify-content: space-between;
  white-space: nowrap;
}

.info-row span:last-child {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.label {
  color: #666;
  font-weight: bold;
  margin-right: 10px;
}

.search-button {
  background-color: #4050B5;
  color: white;
  padding: 2px 12px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: bold;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.search-button:hover {
  background-color: #3040A5;
  transform: translateY(-1px);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
}

.search-button:active {
  transform: translateY(1px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

:deep(.van-search){
  padding-top:0;
  padding-bottom: 0;
  .van-search__content{
    background: #fff;
    border-radius: 20px;
    .van-field__left-icon{
      margin-left: 10px;
    }
  }
}
</style>
